<el-card style="flex: 1;" >
        <template #header>
          <div class="card-header">
            <span>已有权限</span>
            <el-button class="button"   type="warning" >撤销权限</el-button>
          </div>
        </template>
        <el-table
            :data="state.rolePermissionModel.permissionAssigned"
            border
            ref="tableRef"
            v-loading="state.loading"
            element-loading-text="正在加载..."
            :header-cell-style="{'text-align':'center','font-weight':'bold'}"
            :cell-style="{'text-align':'center'}"
            row-key="id"
            :tree-props="{ children: 'children'}"
            style="flex: 1;">
          <template v-for="item in columns">
            <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :min-width="item.minWidth" :sortable="item.sortable">
              <template #default="scope" v-if="item.render">
                <render-column :render="item.render" :scope="scope" :item="item"></render-column>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </el-card>
      <el-card style="flex: 1;">
        <template #header>
          <div class="card-header">
            <span>未分配权限</span>
            <el-button class="button" type="primary">分配权限</el-button>
          </div>
        </template>
        <el-table
            :data="state.rolePermissionModel.permissionUnAssigned"
            border
            ref="tableRef1"
            v-loading="state.loading"
            element-loading-text="正在加载..."
            :header-cell-style="{'text-align':'center','font-weight':'bold'}"
            :cell-style="{'text-align':'center'}"
            row-key="id"
            :tree-props="{ children: 'children'}"
        >
          <template v-for="item in columns">
            <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :min-width="item.minWidth" :sortable="item.sortable">
              <template #default="scope" v-if="item.render">
                <render-column :render="item.render" :scope="scope" :item="item"></render-column>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </el-card>


<el-table
    :data="state.rolePermissionModel.permissionAssigned"
    border
    ref="tableRef"
    v-loading="state.loading"
    element-loading-text="正在加载..."
    :header-cell-style="{'text-align':'center','font-weight':'bold'}"
    :cell-style="{'text-align':'center'}"
    row-key="id"
    :tree-props="{ children: 'children'}"
    style="flex: 1">
<template v-for="item in columns">
  <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :min-width="item.minWidth" :sortable="item.sortable">
    <template #default="scope" v-if="item.render">
      <render-column :render="item.render" :scope="scope" :item="item"></render-column>
    </template>
  </el-table-column>
</template>
</el-table>

<el-table
    :data="state.rolePermissionModel.permissionUnAssigned"
    border
    ref="tableRef2"
    v-loading="state.loading"
    element-loading-text="正在加载..."
    :header-cell-style="{'text-align':'center','font-weight':'bold'}"
    :cell-style="{'text-align':'center'}"
    row-key="id"
    :tree-props="{ children: 'children'}"
    style="flex: 1">
<template v-for="item in columns">
  <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :min-width="item.minWidth" :sortable="item.sortable">
    <template #default="scope" v-if="item.render">
      <render-column :render="item.render" :scope="scope" :item="item"></render-column>
    </template>
  </el-table-column>
</template>
</el-table>